<template>
  <div class="app-footer" v-if="manageFooter.isShowFooter">
    <van-tabbar route active-color="#1BB799">
      <van-tabbar-item v-for="item in bottomRoutes" :key="item.path" replace :to="item.path" :icon="item.icon">
        <span>{{ item.meta.title }}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { bottomRoutes } from 'router/routes.js'

const router = useRouter()
const manageFooter = reactive({ routeList: ['/audit'], isShowFooter: true })

// 控制底部导航栏显示与否
const isNavFooterShow = (path) => {
  manageFooter.isShowFooter = !manageFooter.routeList.includes(path)
}

watch(() => router.currentRoute.value.path, (newRoute) => {
  isNavFooterShow(newRoute)
})

onMounted(() => {
  isNavFooterShow(router.currentRoute.value.path)
})

</script>
<style scoped lang="less"></style>
